<script>
export default {
  name: 'TodoHeader',
}
</script>
<script setup name="TodoHeader">
import { ref } from 'vue'
import useStore from '../../store'
const { todos } = useStore()
// todoName 只属于自己的组件的，没必要往 Pinia 中放了
const todoName = ref('')
const handleUp = () => {
  // 注意一定不要忘了加 .value
  todos.addTodo(todoName.value)
  todoName.value = ''
}
</script>
<template>
  <header class="header">
    <h1>todos</h1>
    <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="todoName" @keyup.enter="handleUp" />
  </header>
</template>
